<template>
    <div class="page">
        <div class="article">
            <div class="article-bar">
                <img  v-if="!videoFlag" class="article-bar-img" :src="data.img" />
                <img  v-if="data.video && !videoFlag" class="article-bar-play" @click="videoPlay" src="../assets/play-btn.png">
                <my-video ref="myVideo" v-if="data.video"  class="article-bar-video" :sources="video.sources" :options="video.options"></my-video>
            </div>
            <div class="article-title">{{data.title}}</div>
            <div class="article-tag">
                <router-link :to="{path:'/guideline',query:{'keyword':item}}" class="article-tag-item" v-for="item in data.tag">{{item}}</router-link>
            </div>
            <div class="article-info">
                <span class="article-info-item">{{data.create_time}}</span>
                <span class="article-info-item">{{data.browse}} 浏览</span>
                <span class="article-info-item">{{data.fabulous}} 点赞</span>
            </div>

            <div  class="article-desc">{{data.description}}</div>
            <div class="article-content" v-html="data.content"></div>
        </div>
        <div class="share-div" :style="{'top':shareTop +'px'}" v-if="shareView" @click="shareFn" @touchmove.prevent>
            <img class="share-div-img" src="../assets/buy-share-icon2.png"/>
        </div>
        <div class="h120"></div>
        <div class="buyBar">
            <div class="buyBar-list" >
                <!--@click="$router.go(-1)"-->
                <router-link to="/guideline"   class="buyBar-list-back">
                    <img class="buyBar-list-back-icon" src="../assets/return_red.png">
                </router-link>
                <div class="buyBar-list-item">
                    <div  class="buyBar-list-item-btn" @click="like"><img class="icon" :src="data.dianzan==1 ? likeArr.imgHover : likeArr.img "></div>
                    <router-link :to="'/article-comment/'+data.article_id"  class="buyBar-list-item-btn">
                        <img class="icon" src="../assets/icon-comment-article.png">
                        <span class="badge">{{data.comment_conut}}</span>
                    </router-link>
                    <div  class="buyBar-list-item-btn" @click="shareFn"><img class="icon" src="../assets/icon-share.png"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {Toast} from 'mint-ui';
    import config from "../store/config"
    import storage from "../store/localstorage"
    import wxShare from "../store/wxShare"
    import myVideo from 'vue-video'
    export default {
        name: "Article",
        components:{
            myVideo
        },
        data(){
        return{
            url:config.url,
            id:'',
            data:'',
            likeArr:{
                img:require('../assets/icon-like-article.png'),
                imgHover:require('../assets/icon-like-article-hover.png')
            },
            shareView: false,//分享
            shareTop: 0,
            video: {},
            videoFlag:false
        }
    },
    methods:{
        getData(){
            this.axios.post('/wapdetails',{article_id:this.id})
                    .then((res)=>{
                this.data=res.data
                this.data.content=this.replaceImg(this.data.content);
                this.data.content=this.formatImg(this.data.content);
                var reg=/^(http|https):\/\//;
                if(!reg.test(res.data.img)){
                    res.data.img=this.url+res.data.img
                }
                if(res.data.share_img && !reg.test(res.data.share_img)){
                    res.data.share_img=this.url+res.data.share_img
                }
                if(res.data.video){
                    if(!reg.test(res.data.video)){
                        res.data.video=this.url+res.data.video
                    }
                }
                if(this.data.video){
                    this.video.sources= [{
                        src: this.data.video,
                        type: 'video/mp4'
                    }];
                    this.video.options= {
                        autoplay: false,
                        volume: 0.6,
                        //poster: this.data.img
                    }
                }
                this.share();
            })
        },
        // 视频播放
        videoPlay(){
            this.videoFlag=true
            this.$refs.myVideo.play();
        },
        // 替换图片路径
        replaceImg(data){
            data=data.replace( /<style(([\s\S])*?)<\/style>/gi,'');
            //data=data.replace( /style="(([\s\S])*?)"/gi,'');
            data=data.replace( /width="(([\s\S])*?)"/gi,'width="100%"');
            data=data.replace( /height="(([\s\S])*?)"/gi,'height="auto"');
            data=data.replace( /\/ueditor\//g,this.url+'/ueditor/');
            return data.replace( /p><img/ig,'p><img preview="99" ');
        },
        formatImg(html) {
            var newContent = html.replace(/<img[^>]*>/gi, function (match, capture) {
                var match = match.replace(/style=\"(.*)\"/gi, '');
                return match;
            });
            return newContent;
        },
        // 点赞
        like() {
            if(!this.$store.state.token){
                this.$router.push({path:"/my-login"})
                return;
            }
            var params = {
                article_id: this.data.article_id
            }
            this.axios.post('wapfabulous',params)
                    .then(res => {
                Toast({message: res.msg, duration: 1000});
                if(res.msg=='点赞成功'){
                    this.data.dianzan=1
                }else{
                    this.data.dianzan=0
                }
            })
        .catch(err => console.log(err));
        },
        shareFn() {
            this.shareTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
            this.share();
            this.shareView = !this.shareView;

        },
        // 分享
        share() {
            //console.log('分享')
            var _that=this;
            wxShare({
                title: '[快帮行]' + _that.data.title, // 分享标题
                //link: window.location.href, // 分享链接
                imgUrl:_that.data.share_img ? _that.data.share_img :_that.data.img, // 分享图标
                debug: false
            },()=> {//分享成功后的回调函数
                this.shareView=false
                console.log('分享成功')
            });
        }
    },
    mounted(){
        this.id=this.$route.params.id;
        this.getData();
    },
    updated(){
        this.$previewRefresh() ////图片异步生成，图片数据更新后调用：
    }
    }
</script>

<style lang="scss" scoped>
    @import "../assets/base";

    .page {
        min-height: 100%;
        background-color: $color0;
    }
    .h120{
        height: rpx(120);
    }

    .article{
    &-bar{
         position: relative;
         width: 100%;
         height: rpx(500);
    &-play{
         position: absolute;
         left: 50%;
         top: 50%;
         z-index: 999;
         margin-left: rpx(-48);
         margin-top: rpx(-48);
         width: rpx(96);
         height: rpx(96);
     }
    &-img{
         position: absolute;
         left: 0;
         top: 0;
         z-index: 998;
         width: 100%;
         height: rpx(500);

     }
    &-video{
         overflow: hidden;
         width: 100%;
         height: rpx(500);
     }
    }
    &-title{
         padding: rpx(40) rpx(30);
         font-size: rpx(48);
         line-height: 130%;
     }
    &-tag{
         padding: 0 rpx(30);
    &-item{
         margin-right: rpx(20);
         padding: rpx(6);
         border-radius: $radius6;
         border: 1px solid $color2;
         color: $color5;
         font-size: rpx(24);
     }
    }
    &-info {
         padding: rpx(30);
    &-item {
         margin-right: rpx(60);
         color: $color5;
         font-size: rpx(28);
     }
    }
    &-desc{
         margin: 0 rpx(30)  rpx(30);
         padding: rpx(20);
         background-color:#FFFBEA;
         font-size: rpx(30);
         line-height: 160%;
         color: #666;
     }
    &-content{
         padding: rpx(30);
         font-size: rpx(30);
         line-height: 160%;
    img{
        padding: rpx(10) 0;
        max-width: 100% !important;
        height: auto;
    }
    }
    }
    //分享
      .share-div {
          position: absolute;
          background: rgba(0, 0, 0, .5);
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          z-index: 99999;
          width: 100%;
          height: 100%;
          text-align: center;
    &-img {
         margin-top: rpx(30);
         width: rpx(500);
         height: rpx(220);
     }
    }

    //底部
      .buyBar {
          position: fixed;
          z-index: 999;
          left: 0;
          right: 0;
          bottom: 0;
          border-top: $color2 solid 1px;
          background: $color0;
          display: flex;
          align-items: center;
          flex-wrap: nowrap;
    &-list{
         display: flex;
         align-items: center;
         width: 100%;
         height: rpx(90);
    &-item{
         flex: 1;
         display: flex;
         justify-content: center;
    &-btn{
         position: relative;
         width: rpx(150);
         text-align: center;
    .icon{
        width: rpx(48);
        height: rpx(48);
    }
    .badge{
        position: absolute;
        top: rpx(-10);
        left: 50%;
        margin-left: rpx(24);
        font-size: rpx(24);
    }
    }
    }
    &-back{
         border-right: 1px solid $color2;
         width: rpx(90);
         height: rpx(90);
         text-align: center;
    &-icon{
         margin-top:rpx(18) ;
         width: rpx(60);
         height: rpx(60);
     }
    }
    }
    }

</style>
<style lang="scss">
    @import "../assets/base";
    .article-bar-video .container{
        height: 100%;
        background-color: $color1;
    }
    .article-bar-video .container .__cov-video-container{
        height: 100%;
        z-index: 997;
    }
    .article .__cov-video-container .__cov-contrl-content{
        display: block!important;
    }

    .article{
    &-content{
         padding: rpx(30);
         font-size: rpx(30);
         line-height: 160%;
         word-break: break-word;
    img{
        padding: rpx(10) 0;
        max-width: 100% !important;
        height: auto;
    }
    }
    }
</style>